import React from "react"
import { View, Navigator } from "@tarojs/components"
import GpContainer from "@/components/GpContainer"
import { commonUrls } from "@/utils/router"
import styles from "./index.module.scss"

/**
 * @page 全部工具
 */
export default function Tools() {
  const navigaitions: IOptionLike<string>[] = [
    { label: "培训指南", value: commonUrls.trainGuide },
    { label: "专业解读", value: commonUrls.proExplain },
    { label: "艺考专题", value: commonUrls.column },
    { label: "最新资讯", value: commonUrls.news },
    { label: "机构排名", value: commonUrls.institutionRanking },
    { label: "艺考问答", value: commonUrls.examQA }
  ]
  return (
    <GpContainer
      style={{
        backgroundColor: "#ffffff",
        minHeight: "100vh"
      }}
    >
      <View className="box-border px-32px">
        <View className="text-36px text-bold font-500 py-32px">全部工具</View>
        <View className="flex flex-row flex-wrap gap-y-24px gap-x-16px">
          {navigaitions.map(l => (
            <Navigator url={l.value} key={l.value} className={styles.navigation}>
              {l.label}
            </Navigator>
          ))}
        </View>
      </View>
    </GpContainer>
  )
}
